<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容溢出</title>
    <style>
        div{
            width: 300px;
            height: 100px;
            border: 3px solid red;
            margin: 0 auto;

            /*overflow: 控制内容溢出
            hidden: 隐藏.超出父元素的内容隐藏掉.带来的坏处就是看不到溢出的内容.
            scroll: 滚动显示.

            */
            overflow: scroll;
            /*overflow-x和overflow-y来控制横向和纵向滚动条*/
            overflow-y: hidden;
            overflow-x: hidden;

            /*word-wrap: 设置换行方式.
            break-word: 单词这段,保证两端对齐,不保证单词的完整性.
            */
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <div>
        <!--中文在元素内会自动换行,但是英文默认不会自动换行.-->
        <!--啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊-->

        <!--英文默认不会换行, 但是如果英文中右空格, 则会在空格处换行.
        英文不会换行,是因为电脑会把他当作一个单词,为了不把单词拆开. 

        &nbsp; : non-breaking space 非换行空格,会被当作一个英文字符.
        -->
        <!--aaaaaaaaaaaaaa&nbsp;aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-->


        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    </div>
</body>
</html>